<template>
  <div class="inventory-page">
    <!-- 页面头部 -->
    <el-page-header content="库存容量">
      <template #content>
        <div class="header-tools">
          <el-button type="primary"  size="small">刷新</el-button>
          <el-button type="default"  size="small">返回</el-button>
        </div>
      </template>
    </el-page-header>

    <!-- 数据筛选 -->


        <el-form-item label="库位编号">
          <el-input v-model="InventoryList.binL_Code" placeholder="请输入库位编号" clearable style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item>

          <el-button type="primary" @click="InventoryList">查询</el-button>
          <el-button type="default"  @click="onReset">重置</el-button>
        </el-form-item>



    <!-- 数据列表 -->
    <el-card class="table-card" shadow="never">
      <el-table :data="tableData" border stripe style="width: 100%" >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="binL_Code" label="库位编号" />
        <el-table-column prop="binL_UserType" label="库位使用方式" />
        <el-table-column prop="binL_Width" label="库位宽度" />
        <el-table-column prop="binL_Height" label="库位高度" />
        <el-table-column prop="binL_Length" label="库位长度" />
        <el-table-column prop="binL_Nums" label="库位数量" />
        <el-table-column prop="binL_UseNums" label="库位已用数量" />
        <el-table-column prop="binL_MinNums" label="库位下限容量" />
      </el-table>
    </el-card>
    <el-pagination
      v-model:current-page="InventoryList.pageIndex"
      v-model:page-size="InventoryList.pageSize"
      :page-sizes="[10, 20, 30]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="InventoryList.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      prev-text="上一页" next-text="下一页"
    />
  </div>
</template>

<script lang="ts" setup>
import axios from 'axios';
import { ref, onMounted,reactive } from 'vue'
import { ElMessage,ElMessageBox } from 'element-plus' 


const tableData = ref([])
const InventoryList = reactive({
 binL_Code : "",
 totalCount: 0,
  totalPage: 0,
  pageIndex: 1,
  pageSize: 10,
})
//
onMounted(() => {
  InventoryListQuery()
})
//显示
const InventoryListQuery = () => {
  axios.get('http://localhost:5115/api/CapacityInventory/GetCapacityInventory', {
    params: {
      binL_Code: InventoryList.binL_Code,


      pageIndex: InventoryList.pageIndex,
      pageSize: InventoryList.pageSize,
    }
  }).then(res => {
    tableData.value = res.data.data.data
    console.log(res)
    InventoryList.totalCount = res.data.data.totalCount
    InventoryList.totalPage = res.data.data.totalPage
  })
}



const handleSizeChange = (val: number) => {
  InventoryList.pageSize = val
  InventoryListQuery()
}
const handleCurrentChange = (val: number) => {
  InventoryList.pageIndex = val
  InventoryListQuery()
}
</script>

<style scoped>
.inventory-list {
  padding: 20px;
}
.header {
  margin-bottom: 20px;
}
.filter-section {
  margin-bottom: 20px;
  background: #f9f9f9;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #ebeef5;
}
.export-section {
  margin-top: 20px;
  text-align: right;
}
</style>